<template>
    <van-popup v-model="couponPopuShow" class="couponPopu" @close="close">
        <div class="couponPopuMain" @click="pickUpCoupon">
            <div class="amount" v-if="couponItem">{{couponItem.money}}</div>
        </div>
    </van-popup>
</template>

<style lang="less" scoped>
.couponPopu{
    // position: relative;
    // display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent !important;
    .couponPopuMain{
        position: relative;
        width: 375px;
        height: 450px;
        border: 1px solid transparent;
        background-image: url('/img/coupon.png');
        background-color: transparent !important;
        background-repeat: no-repeat;
        background-size: contain;
        text-align: center;
        .amount{
            color: red;
            line-height: 1;
            font-size: 18px;
            margin-top: 80px;
            margin-left: -40px;
        }
    }
}
</style>

<script>
import Vue from 'vue'
import { Popup } from 'vant';
Vue.use(Popup);
export default {
    name: 'couponPopu',
    data(){
        return {
            couponPopuShow: false,
            couponItem: undefined,
            timer: null,
        }
    },
    mounted(){
        // console.log('[当前路径]', this.$route.path)
        // this.couponPopuShow = true
        this.timer = setInterval( this.interCheckCoupu, 1000)
    },
    watch:{
        couponItem(){
            if(this.couponItem && this.couponItem.id){
                this.couponPopuShow = true
            }else{
                this.couponPopuShow = false
            }
        }
    },
    methods:{
        pickUpCoupon(){
            this.$store.dispatch('pickCoupon',{
                id: this.couponItem.id
            }).then(res=>{
                this.$cookie.del('can_pick_coupon')
                return this.$store.commit('canPickCoupon', undefined)
            }).catch(e=>{

            })
        },
        interCheckCoupu(){
            this.couponItem = this.$cookie.getCanPickCoupon()
        },
        close(){
            if(this.timer) {
                // clearInterval(this.timer)
            }
        }
    }
}
</script>

